<template>
	<!-- 百度api调用抽屉 -->
    <el-drawer
        class="assist-writing"
        title="智能创作"
        :visible.sync="drawer"
        direction="rtl"
        :wrapperClosable="false"
        @close="close"
    >
        
        <div ref="easyAssistDrawerMain" class="assist-writing-main">
          
          	<!-- 顶部切换区域 -->  
          	<div ref="easyAssistDrawerTab" class="radio-tab-wrap">
            	<el-radio-group v-model="tabRiado" size="mini">
              		<el-radio-button label="热点发现"></el-radio-button>
              		<el-radio-button label="文本纠错"></el-radio-button>
              		<el-radio-button label="发文助手"></el-radio-button>
            	</el-radio-group>
          	</div>



          	<!-- 内容展示区域 -->
          	<div class="result-wrap" :style="{height:resultHeight+'px'}">

              <el-scrollbar class="api-result__scrollbar">

                <div class="api-result-content">
                	<template v-if="tabRiado == '热点发现'">
                		<div class="no-auth">
                			<img :src="noAuth">
                			<p>暂无接口访问权限</p>
                		</div>
                	</template>

                	<template v-if="tabRiado == '文本纠错'">
                		<div class="handle-list">
    	              
    	              		<!-- 接口调用操作区 -->
    	              		<div class="api-opearte">
    	                		<div class="opearte-left">
    	                  			<span class="title">文本纠错</span>
    	                  			<span class="sub-title">识别错误片段并给出正确建议</span>
    	                		</div>
    	     
    	                		<div class="opearte-right">
    	                  			<el-button type="primary" size="mini" @click="ecnet">纠错</el-button>
    	                		</div>
    	              		</div>

    	              		<!-- 返回结果区域 -->
    	              		<div class="api-result" v-if="ecnetResult">
                          <!-- 没有纠错结果 -->
                          <template v-if="ecnetResult.length == 0">
                            <div class="api-no-result">
                              <img :src="perfectEasy">
                              <p>您的文章太完美了</p>
                              <p>暂时没有发现错误的词语</p>
                            </div>
                          </template>
                          <!-- 纠错结果展示 -->
    	              			<template v-if="ecnetResult.length > 0">
    		              			<li class="api-result-item" v-for="(item,index) in ecnetResult" :key="index">
    		              				<p class="text">
    		              					<span class="org">{{item.ori_frag}}</span>
    		              					<span class="advice">{{item.correct_frag}}</span>
    			                		<p class="hander-bar">
    			                  			<el-button size="mini" type="text" @click="ecnetIgnore(index,ecnetResult)">忽略</el-button>
    			                  			<el-button size="mini" type="text" @click="ecnetAdopt(item)">采纳</el-button>
    			                		</p>
    			                	</li>
    	              			</template>
    	                		
    	              		</div>

    	            	</div>
                	</template>

                	<template v-if="tabRiado == '发文助手'">

    	            	<!-- 提示内容 -->
    	            	<div class="tips">请先添加标题，同时正文不少于200字，再点击自动生成/全部生成</div>

    	            	<div class="handle-list">
    	              
    	              		<!-- 接口调用操作区 -->
    	              		<div class="api-opearte">
    	                		<div class="opearte-left">
    	                  			<span class="title">文章摘要</span>
    	                  			<span class="sub-title">根据文章内容，自动生成摘要</span>
    	                		</div>
    	     
    	                		<div class="opearte-right">
    	                  			<el-button type="primary" size="mini" @click="summary">生成</el-button>
    	                		</div>
    	              		</div>

    	              		<!-- 返回结果区域 -->
    	              		<div class="api-result" v-show="summaryResult">
    	                		<p class="text">{{summaryResult}}</p>
    	                		<p class="hander-bar">
    	                  			<el-button size="mini" type="text" @click="summaryIgnore">取消</el-button>
    	                  			<el-button size="mini" type="text" @click="summaryAdopt">采纳</el-button>
    	                		</p>
    	              		</div>

    	            	</div>


    	            	<div class="handle-list">
    	              
    	              		<!-- 接口调用操作区 -->
    	              		<div class="api-opearte">
    	                		<div class="opearte-left">
    	                  			<span class="title">文章标签</span>
    	                  			<span class="sub-title">输出能够反映文章关键信息的多维度标签</span>
    	                		</div>
    	     
    	                		<div class="opearte-right">
    	                  			<el-button type="primary" size="mini" @click="keyword_topic">生成</el-button>
    	                		</div>
    	              		</div>

    	              		<!-- 返回结果区域 -->
    	              		<div class="api-result" v-if="keywordResult">
                          <template v-if="keywordResult.length == 0">
                            <div class="api-no-result">
                              <img :src="noData">
                              <p>暂未获得文章标签</p>
                              <p>请完善文章内容</p>
                            </div>
                          </template>

    	              			<template  v-if="keywordResult.length > 0">
    		                		<p class="text">
    		                			<el-tooltip v-for="(item,index) in keywordResult" :key="index" effect="light" content="点击复制" placement="right">
          									    <span class="tag" :data-clipboard-text = "item.tag" @click="copyTag(item)">#{{item.tag}}#</span>
        								      </el-tooltip>
    		                			
    		                		</p>
    	                		</template>
    	              		</div>

    	            	</div>


    	            	<div class="handle-list">
    	              
    	              		<!-- 接口调用操作区 -->
    	              		<div class="api-opearte">
    	                		<div class="opearte-left">
    	                  			<span class="title">文章分类</span>
    	                  			<span class="sub-title">输出主题一级、二级分类</span>
    	                		</div>
    	              		</div>

    	              		<!-- 返回结果区域 -->
    	              		<div class="api-result" v-if="topicResult">
    	              			<!-- 一级分类结果 -->
    	              			<template v-if="!validatenull(topicResult.lv1_tag_list)">
    		                		<p class="text">
    		                			<span class="label">一级分类结果：</span>
    		                			<el-tooltip v-for="(item,index) in topicResult.lv1_tag_list" :key="index" effect="light" content="点击复制" placement="right">
          									<span class="tag" :data-clipboard-text = "item.tag" @click="copyTag(item)">#{{item.tag}}#</span>
        								</el-tooltip>
    		                			
    		                		</p>
    	                		</template>

    	                		<!-- 二级分类结果 -->
    	              			<template v-if="!validatenull(topicResult.lv2_tag_list)">

    		                		<p class="text">
    		                			<span class="label">二级分类结果：</span>
    		                			<el-tooltip v-for="(item,index) in topicResult.lv2_tag_list" :key="index" effect="light" content="点击复制" placement="right">
          									<span class="tag" :data-clipboard-text = "item.tag" @click="copyTag(item)">#{{item.tag}}#</span>
        								</el-tooltip>
    		                			
    		                		</p>
    	                		</template>

    	              		</div>

    	            	</div>

    	            </template>	
                </div>  
                  
              </el-scrollbar>  

          	</div>

        </div>

    </el-drawer>
</template>

<script>
import Clipboard from 'clipboard'
import {
  	ecnet,
  	summary,
  	keyword,
  	topic
} from "@/api/substance/publish"

import { validatenull } from "@/utils/validate"
import { dislodgePx } from "@/utils/util"
import commonMixins from "@/mixins/common"
export default{
	props:{
		visible:{
			type:Boolean,
			default:false
		},
		title:{
			type:String,
			required:true
		},
		content:{
			type:String,
			required:true
		},
		assistType:{
			type:String,
			default:'热点发现'
		}
	},
  mixins:[commonMixins],
	data(){
		return{
			noAuth:require("@/assets/no-auth.png"),
      perfectEasy:require("@/assets/dingNiu/substance/perfect-easy.png"),
      noData:require("@/assets/dingNiu/substance/no-data.png"),
			resultHeight:200,
      //右侧抽屉
  		drawer:false,
  		tabRiado:'热点发现',
  		ecnetResult:null,
  		summaryResult:null,
    	keywordResult:null,
    	topicResult:null
		}
	},
	watch:{
		visible(val){
			this.drawer = val;
			this.tabRiado = this.assistType;
      this.$nextTick(()=>{
        
        this.setSize();
      })
		}
	},
  mounted(){
    
  },
	methods:{
    setSize(){
      
        var main =this.$refs.easyAssistDrawerMain ? this.getStyle(this.$refs.easyAssistDrawerMain) : {};
        var main_h = dislodgePx(main.height);

        var tab = this.$refs.easyAssistDrawerTab ? this.getStyle(this.$refs.easyAssistDrawerTab) : {};

        var tab_h = dislodgePx(tab.height) || 0;
        var tab_mt = dislodgePx(tab.marginTop) || 0;
        var tab_mb = dislodgePx(tab.marginBottom) || 0;

        var result = main_h-(tab_h+tab_mt+tab_mb);
        this.resultHeight = result;
      
    },
		//判空
		validatenull(val){
			return validatenull(val)
		},
		summary(){
          let reg = /<\/?.+?\/?>/g;
          var content = this.content.replace(reg,'');
      		var title = this.title;
      		var max_summary_len = 100;
      		summary(title,content,max_summary_len).then((res) => {
        		console.log("%c百度api摘要","background:#f09;color#fff");
        		console.log(res);
        		this.summaryResult = res.data.data.summary;
      		})
    	},
    	keyword_topic(){
      		this.keyword();
      		this.topic();
    	},
    	keyword(){
          let reg = /<\/?.+?\/?>/g;
          var content = this.content.replace(reg,'');
      		var title = this.title;
      		keyword(title,content).then((res) => {
        		console.log("%c百度api标签","background:#f09;color#fff");
        		console.log(res);
        		this.keywordResult = res.data.data.items;
      		})
    	},
    	topic(){
          let reg = /<\/?.+?\/?>/g;
          var content = this.content.replace(reg,'');
      		var title = this.title;
      		topic(title,content).then((res) => {
        		console.log("%c百度api文章分类","background:#f09;color#fff");
        		console.log(res);

        		this.topicResult = res.data.data.item;

      		})
    	},
    	ecnet(){
          let reg = /<\/?.+?\/?>/g;
      		var text = this.content.replace(reg,'');

      		ecnet(text).then((res) => {
        		console.log("%c百度api纠错","background:#f09;color#fff");
        		console.log(res)
        		var result = res.data.data;
        		//纠错后正确的文本
        		var correct = result.item.correct_query;
        		var err_arr = result.item.vec_fragment;
        		this.ecnetResult = err_arr;
      		})
    	},
    	//纠错忽略
    	ecnetIgnore(index,list){
    		list.splice(index,1)
    	},
    	//纠错采纳
    	ecnetAdopt(item){
    		var err = item.ori_frag;
    		var advice = item.correct_frag;
    		this.$emit('ecnet',{err:err,advice:advice})
    	},
    	//文章摘要忽略
    	summaryIgnore(){
    		this.summaryResult = null;
    	},
    	//文章摘要采纳
    	summaryAdopt(){
    		this.$emit('summary',this.summaryResult)
    	},
    	//复制标签
    	copyTag(item){
    		var clipboard = new Clipboard(".tag");
    		clipboard.on('success',e =>{
    			this.$ipcTips.success("复制成功")
    			clipboard.destroy();
    		})

    	},
    	//恢复抽屉默认
    	reset(){
    		this.drawer = false;
    	},
    	//关闭抽屉
    	close(){
    		this.reset();
    		this.$emit('close')
    	}
	}
}	

</script>


<style>
  
  .api-result__scrollbar{
    height: 100%;
  }

  .api-result__scrollbar .el-scrollbar__wrap{
    overflow-x: hidden;
  }
</style>

<style lang="scss">

.assist-writing-main{
  	padding:0 15px;
    height:100%;
  	.radio-tab-wrap{
    	text-align: center;
    	border-bottom: 1px solid #e8e8e8;
    	margin-left: -15px;
    	margin-right: -15px;
    	padding: 10px 0;
  	}
  	.result-wrap{
      overflow: hidden;
      margin-left: -15px;
      margin-right: -15px;
      .api-result-content{
        padding: 0 15px;
        .no-auth{
          width: 120px;
          font-size: 12px;
          color: #666;
          text-align: center;
          padding-top: 50px;
          margin: auto;
          display: flex;
          flex-direction: column;
          img{
            width: 100%;
            margin-bottom: 10px;
          }

        }
        .tips{
            padding: 10px 0;
            font-size: 12px;
            color: #c00;
        }
        .handle-list{
            border-bottom: 1px solid #e8e8e8;
            .api-opearte{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              padding: 10px 0;
              .opearte-left{
                  display: flex;
                  flex-direction: column;
                  font-size: 12px;
                  .title{
                    color: #000;
                    margin-bottom: 5px;
                  }
                  .sub-title{
                    color: #999;
                  }
              }
            }
            .api-result{
              padding: 10px;
              margin-bottom: 10px;
              font-size: 12px;
              background: #f6f6f7;
              p{
                  margin: 0;
                  color: #333;
                  line-height: 30px;
                  .label{
                    margin-right: 4px;
                  }
                  .tag{
                    margin-right: 4px;
                    cursor: pointer;
                  }
              }
              .api-result-item{
                list-style: none;
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                .text{
                    color: #333;
                    line-height: 30px;
                    .org{
                      color: #900;
                      margin-right: 5px;
                    }
                    .advice{
                      color: #090;
                    }
                }
              }
              
            }

        }
      }
  		
  	}
}

.api-no-result{
  text-align: center;
  img{
    width: 150px;
  }
  p{
    text-align: center;
    font-size: 14px;
    color: #000;
    line-height: 30px;
  }
}
</style>